<template>
  <div :class="{'search-model': true, 'search-model-inline': inline}">
    <div class="search-area">
      <div class="left-input">
        <a-input v-model.trim="inputVal" size="large" @focus="filterSearchValue" @blur="withoutFilter" @change="filterSearchValue" placeholder="请输入关键词"/>
        <div class="more-about" v-if="showList.length > 0">
          <div class="each-about" v-for="(item, i) in showList" :key="item + i" @click="selectHistory(item[keyWord])">
            <span>{{item[keyWord]}}</span>
          </div>
        </div>
      </div>
      <div class="right-button" @click="doSearch">
        <span>搜索</span>
      </div>
    </div>
    <div class="search-history">
      <div :class="{'each-history': true, 'is-active': item === inputVal}" v-for="(item, i) in historyList" :key="item + i" @click="selectHistory(item)">
        <span>{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      inline: {
        type: Boolean,
        default: true
      },
      historyKey: {
        type: String,
        default: 'search-input'
      },
      aboutList: {
        type: Array,
        default() {
          return []
        }
      },
      keyWord: {
        type: String,
        default: 'name'
      }
    },
    data(){
      return {
        inputVal: '',
        historyList: [],
        maxHistory: 4,
        maxAbout: 4,
        showList: []
      }
    },
    mounted() {
      this.getHistoryList();
    },
    methods: {
      // 关闭过滤查询
      withoutFilter() {
        let timer = setTimeout(() => {
          this.showList = [];
          clearTimeout(timer);
        }, 100);
      },
      // 过滤查询条件
      filterSearchValue() {
        if(!this.inputVal) {
          this.showList = [];
          return;
        }
        let aboutList = this.aboutList || [];
        let showList = aboutList.filter(item => item[this.keyWord].indexOf(this.inputVal) !== -1);
        let calc = showList.length - this.maxHistory;
        if(calc > 0) {
          showList.splice(this.maxAbout - 1, calc);
        }
        console.log(this.maxAbout);
        this.showList = showList;
      },
      // 选择历史记录
      selectHistory(item) {
        this.inputVal = item;
        this.setHistoryList();
      },
      // 获取历史搜索记录
      getHistoryList() {
        let historyList = this.$storage.get(this.historyKey);
        historyList = Array.isArray(historyList) ? historyList : [];
        let calc = historyList.length - this.maxHistory;
        if(calc > 0) {
          historyList.splice(this.maxHistory - 1, calc);
        }
        this.historyList = historyList;
      },
      // 设置历史搜索记录
      setHistoryList() {
        let historyList = this.$storage.get(this.historyKey);
        if(!Array.isArray(historyList)) historyList = [];
        for(let i = 0; i < historyList.length; i ++) {
          if(historyList[i] === this.inputVal) {
            historyList.splice(i, 1);
            i --;
          }
        }
        historyList.unshift(this.inputVal);
        if(historyList.length > 10) historyList.pop();
        this.$storage.set(this.historyKey, historyList);
        this.getHistoryList();
      },
      // 执行查询
      doSearch() {
        this.$emit('search', this.inputVal);
        if(this.inputVal) this.setHistoryList();
      }
    }
  }
</script>

<style scoped lang="less">
  .search-model {
    width: 702px;
    height: 61px;

    &.search-model-inline {
      display: inline-block;
      margin: 0;
    }

    .search-area {
      width: 100%;
      height: 42px;
      display: flex;
      align-items: center;

      .left-input {
        width: 602px;
        height: 42px;
        border: 1px solid @activeRed;
        position: relative;

        .more-about {
          width: 602px;
          height: auto;
          overflow: hidden;
          position: absolute;
          top: 40px;
          left: -1px;
          transition: height 0.6s;
          background: #fff;
          border: 1px solid @activeRed;

          .each-about {
            height: 40px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 0 12px;
            line-height: 40px;
            text-align: left;
            font-size: 12px;
            cursor: pointer;

            &:hover {
              background: rgba(200, 200, 200, 0.2);
            }
          }
        }

        .ant-input{
          border: none;
          width: 100%;
          height: 40px;

          &:focus {
            border: none;
            box-shadow: none;
          }

          &::placeholder {
            color: @placeHolderColor;
            font-size: 12px;
          }

          &.ant-input-lg {
            padding: 6px 12px;
            font-size: 14px;
            line-height: 28px;
          }
        }
      }

      .right-button {
        width: 100px;
        height: 42px;
        background: @activeRed;
        color: #fff;
        font-size: 16px;
        line-height: 42px;
        text-align: center;
        cursor: pointer;
        font-family: "SourceHanSansCN";
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

    }

    .search-history {
      width: 100%;
      height: 12px;
      display: flex;
      align-items: center;
      font-size: 12px;
      margin-top: 7px;

      .each-history {
        margin-right: 20px;
        color: @placeHolderColor;
        cursor: pointer;

        &.is-active {
          color: @activeRed;
        }
      }
    }
  }
</style>
